<template lang="html">
    <div id="app">
        <div class="nav">
            <!-- <ul class="clearFix">
                <li class="active">
                    <a href="/home">首页</a>
                </li>
                <li>
                    <a href="/document">文档</a>
                </li>
                <li>
                    <a href="/about">关于</a>
                </li>
            </ul> -->
            <ul class="clearFix">
                <router-link
                    :to="index"
                    tag="li"
                    event="mouseover"
                    exact
                >
                    <a>首页</a>
                </router-link>
                <router-link
                    :to='{ path: "/document#doc" }'
                    tag="li"
                    active-class="docClass"
                    event="mouseover"
                >
                    <a>文档</a>
                </router-link>
                <router-link
                    :to='{ name: "About" }'
                    tag="li"
                    active-class="aboutClass"
                    event="mouseover"
                >
                    <a>关于</a>
                </router-link>
                <router-link
                    :to='{ name: "User" }'
                    tag="li"
                    active-class="userClass"
                    event="mouseover"
                >
                    <a>用户</a>
                </router-link>
            </ul>
        </div>
        <!-- <img
            title="Vue logo"
            alt="Vue logo"
            src="./assets/logo.png"
        /> -->
        <!-- 获取到的选项卡的索引值为: {{ $route.meta.index }} -->

        <div class="myBtn clearFix">
            <input type="button" value="后退" @click="backHandle()" />
            <input type="button" value="前进" @click="forwardHandle()" />
            <input type="button" value="控制导航的步数" @click="goHandle()" />
            <input type="button" value="push导航" @click="pushHandle()" />
            <input type="button" value="replace导航" @click="replaceHandle()" />
        </div>

        <div class="clearFix">
            <!-- 带名字的视图 -->
            <!-- <router-view
                class="slider"
                name="slider"
            >
            </router-view> -->
            <!--
                mode: out-in / in-out
            -->
            <transition
                :name="names"
            >
                <!-- 不带名字的视图 -->
                <router-view
                    class="align"
                >
                </router-view>
            </transition>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        // 组件名称
        name: "App",
        // 监控$route的变化
        watch: {
            "$route" ( to, from ) {
                // console.log ( to.meta.index );
                // console.log ( from.meta.index );

                // to < from，那么left; 否则就是right
                if ( to.meta.index < from.meta.index ) {
                    this.names = "left";
                } else {
                    this.names = "right";
                }
            }
        },
        // 数据中心
        data () {
            return {
                index: '/',
                // 默认向左运动
                names: "left"
            };
        },
        // 方法中心
        methods: {
            backHandle () {
                this.$router.back ();
            },
            forwardHandle () {
                this.$router.forward ();
            },
            goHandle () {
                this.$router.go ( -3 );
            },
            pushHandle () {
                // push新添加一条记录
                this.$router.push ({
                    path: "/document"
                });
            },
            replaceHandle () {
                // 替换当前history记录栈的最后一条记录
                this.$router.replace ({
                    name: "About"
                });
            }
        }
    };
</script>

<style lang="less" rel="stylesheet/less">
    @import './assets/styles/less/app.less';
</style>
